<template>
  <el-dialog v-model="relatedDialogFormVisible" title="关联用户" width="500">
    <div class="flex flex-wrap gap-4 items-center">
      <el-form-item label="关联角色" :label-width="formLabelWidth">
        <el-select
          multiple="multiple"
          collapse-tags
          v-model="value"
          placeholder="选择关联的角色"
          style="width: 240px"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button @click="addClick">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, watch, defineProps, defineEmits, nextTick } from "vue";
import { ElMessage } from "element-plus";
import http from "../../../../util/http.js";
// 自定义属性
const props = defineProps({
  relatedFormVisible: Boolean,
  selectedUser: Object,
  checkedKeys: Object,
  treeref: Object,
});
const relatedDialogFormVisible = ref(props.relatedFormVisible);

// 自定义事件
const emit = defineEmits(["update:relatedFormVisible"]);
// 监听relatedFormVisible、fetchUserMenus属性
watch(
  () => props.relatedFormVisible,
  (newVal) => {
    relatedDialogFormVisible.value = newVal;
    if (newVal) {
      fetchUserMenus();
    }
  },
  { immediate: true } //在组件挂载时立即执行一次
);
// 监听relatedDialogFormVisible变化，关闭对话框
watch(relatedDialogFormVisible, (newVal) => {
  if (!newVal) {
    emit("update:relatedFormVisible", false);
  }
});
// 监听传来的行数据
watch(
  () => props.selectedUser,
  (newVal) => {
    if (newVal) {
    }
  },
  { immediate: true }
);
// 关闭对话框
const closeDialog = () => {
  relatedDialogFormVisible.value = false;
  emit("update:relatedFormVisible", false);
};
// 下拉框数据
const value = ref([]);
const options = ref([]);
const roleoptions = ref([]);
// 读取菜单数据
const fetchUserMenus = async () => {
  if (props.selectedUser && props.selectedUser.id) {
    try {
      const response = await http.post("/roles/getuserroletable", {
        id: props.selectedUser.id,
      });

      const menus = response.data.rows; // 假设menus是一个数组
      // 将数据映射到下拉框选项
      options.value = menus.map((menu) => ({
        label: menu.name,
        value: menu.id, // 使用菜单的ID作为value
      }));
      console.log(111 + props.selectedUser.id);
      // 读取默认角色
      const roleresponse = await http.post("/roles/getusermenutable", {
        id: props.selectedUser.id,
      });
      console.log(222 + roleresponse.data.value);
      const rolemenus = roleresponse.data.rows;
      roleoptions.value = rolemenus.map((menu) => ({
        label: menu.name,
        value: menu.id, // 使用菜单的ID作为value
      }));
      // 设置默认值
      value.value = roleoptions.value.map((option) => option.value);
    } catch (error) {
      ElMessage.error("加载角色菜单失败");
      console.log(error);
    }
  } else {
    console.log("有错误");
  }
};
// 提交功能
// 提交功能
//读取选中的数节点
const addClick = async () => {
  if (props.selectedUser && props.selectedUser.id) {
    try {
      // 选中被勾选的id
      const selectedRoleIds = value.value;

      console.log(111 + props.selectedUser.id);
      console.log(selectedRoleIds);

      // 检查是否有选中的角色
      if (selectedRoleIds.length === 0) {
        ElMessage.warning("请选择至少一个角色");
        return;
      }

      await http.post(
        "/roles/adduserrole",
        {
          id: props.selectedUser.id,
          // roles: selectedRoleIds,
          body: JSON.stringify(selectedRoleIds),
        },
        true
      );
      ElMessage.success("添加成功");
      relatedDialogFormVisible.value = false;
      emit("update:relatedFormVisible", false);
    } catch (error) {
      ElMessage.error("加载角色菜单失败");
    }
  } else {
    console.log("有错误");
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
:deep .flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
</style>
